<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>结果</title>
    <link th:href="@{/css/cropper.css}" rel="stylesheet"/>

    <script th:src="@{/js/cropper.js}"></script>

    <style>
        .container {
            max-width: 640px;
            margin: 20px auto;
        }
        img {
            max-width: 100%; /* This rule is very important, please do not ignore this! */
        }
    </style>
</head>
<body>

    <!--/*@thymesVar id="result" type="cc"*/-->
    <p th:text="${result}">
        description
    </p>

    <div class="container">
        <img id="image" th:src="${imgsrc}" alt="Picture">
    </div>


    <form method="get" action="/upload/cutImage">
        <input type="text" name="x" id="x" value=""/>
        <input type="text" name="y" id="y" value=""/>
        <input type="text" name="width" id="width" value=""/>
        <input type="text" name="height" id="height" value=""/>
        <input type="text" name="fileName" th:value="${imgsrc}">
        <button>提交</button>
    </form>

    <script>
        window.addEventListener('DOMContentLoaded', function () {
            var image = document.querySelector('#image');
            var minAspectRatio = 0.5;
            var maxAspectRatio = 1.5;
            var cropper = new Cropper(image, {
                zoomOnWheel: false,
                viewMode:3,
                ready: function () {
                    var cropper = this.cropper;
                    var containerData = cropper.getContainerData();
                    var cropBoxData = cropper.getCropBoxData();
                    var aspectRatio = cropBoxData.width / cropBoxData.height;
                    var newCropBoxWidth;

                    if (aspectRatio < minAspectRatio || aspectRatio > maxAspectRatio) {
                        newCropBoxWidth = cropBoxData.height * ((minAspectRatio + maxAspectRatio) / 2);

                        cropper.setCropBoxData({
                            left: (containerData.width - newCropBoxWidth) / 2,
                            width: newCropBoxWidth
                        });
                    }
                },
                cropmove: function () {
                    var cropper = this.cropper;
                    var cropBoxData = cropper.getCropBoxData();
                    var aspectRatio = cropBoxData.width / cropBoxData.height;

                    if (aspectRatio < minAspectRatio) {
                        cropper.setCropBoxData({
                            width: cropBoxData.height * minAspectRatio
                        });
                    } else if (aspectRatio > maxAspectRatio) {
                        cropper.setCropBoxData({
                            width: cropBoxData.height * maxAspectRatio
                        });
                    }
                },
                crop: function (e) {
                    document.getElementById("x").value = Math.round(e.detail.x);
                    document.getElementById("y").value = Math.round(e.detail.y);
                    document.getElementById("width").value = Math.round(e.detail.width);
                    document.getElementById("height").value = Math.round(e.detail.height);
                    console.log("x:" + e.detail.x);
                    console.log("y:" + e.detail.y);
                    console.log("width:" + e.detail.width);
                    console.log("height:" + e.detail.height);
                }
            });
        });
    </script>
</body>
</html>